<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<title>Web 2.0 - Battleship Board</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta name="keywords" content="online games, games,play online games,online multiplayer games,multiplayer,Battleship,board games">
	<link href="css/battle/new_game.css" rel="stylesheet" type="text/css"/>
	<link href="css/battle/default.css" rel="stylesheet" type="text/css"/>
	<link href="css/battle/theme1.css" rel="stylesheet" type="text/css"/>
	<link href="css/battle/alert.css" rel="stylesheet" type="text/css"/>
	

	<script src="js/battle/prototype.js" type="text/javascript"></script>
	<script src="js/battle/scriptaculous.js" type="text/javascript"></script>
	<script src="js/battle/effects.js" type="text/javascript"></script>
	<script src="js/battle/window.js" type="text/javascript"></script>
	<script src="js/battle/dragdrop.js" type="text/javascript"></script>

	
	<script type="text/javascript">
// <![CDATA[


var turnUpdateId, messagingCheckId, playerTimerId;

Game = {
	controlUrl : "game_handler",

	doStart : function() {
		Game.showGrid();
		Game.doSetObservers();

		Game.showMessage('s');
		
		// game joined
		//new Ajax.Request(Chat.controlUrl, { method: 'post', parameters: 'a=25', onComplete: null });
	},

	doSetObservers : function() {
		Event.observe($('setup_button'), 'click', Game.doSetupCompletion, false);
		//messagingCheckId = setInterval(Chat.doMessageCheckPrivate, 5000);
		playerTimerId = setInterval(Game.doPlayerList, 15000);
// this fucks ie up when using the a href, somehow it thinks that we are leaving the page...
//		Event.observe(window, 'beforeunload', Game.doClose, false);
	},

	showMessage : function(msg) {
		if (msg == 's') {
		    Dialog.alert("<p class=\"popup_header\">Setup Phase<\/p><br><p class=\"popup_l\">During this phase, you are requred to set up your fleet. "+
		    		"To set a ship, please drag and drop the ship onto the fleet staging area (it will become unmovable if done "+
		    		"correctly). You could set up the ship in vertical or horizontal position by dragging the appropriate shape. "+ 
		    		"<\/p><br><p class=\"popup_l\">Next phase will start as soon as all of the ships are positioned and finish setup button is clicked.<\/p>",
		    		{ windowParameters: { width:450, height:250 }, buttonClass: "popup_button", okLabel:"Start Setup" });
		} else if (msg == 'b') {
		    Dialog.alert("<p class=\"popup_header\">Battle Phase<\/p><br><p class=\"popup_l\">You are now entering the fleet battle phase of the game. "+
		    		"During this phase you are going to shoot at the Enemy Fleet until all of your ships or the entire enemy fleet is "+
		    		"annihilated. The battle occurs by clicking on the field of fire (enemy square) at which point the server will evaluate "+
		    		"hit or miss and proceed to the next turn.  Player who created the game will always start!"+ 
		    		"<\/p><br><p class=\"popup_l\">This phase will automatically be over when game over conditions are met by either side.<\/p>",
		    		{ windowParameters: { width:450, height:270 }, buttonClass: "popup_button", okLabel:"Start Battle" });
		} else if (msg == 'w') {
		    Dialog.alert("<p><img src=\"images/battle/youwin.jpg\" border=\"0\"><\/p>",
		    		{ windowParameters: { width:650, height:510 }, buttonClass: "popup_button", okLabel:"Game Lobby", ok : Game.returnToMain });
		} else if (msg == 'l') {
		    Dialog.alert("<p><img src=\"images/battle/youlose.jpg\" border=\"0\"><\/p>",
		    		{ windowParameters: { width:650, height:510 }, buttonClass: "popup_button", okLabel:"Game Lobby", ok : Game.returnToMain });
		} else if (msg == 'f') {
		    Dialog.alert("<p><b>Game Over<\/b><\/p><br><p>Your opponent withdrew!<\/p>",
		    		{ windowParameters: { width:450, height:120}, buttonClass: "popup_button", okLabel:"Game Lobby", ok : Game.returnToMain });
		}
	},

	returnToMain : function () {
		new Ajax.Request('main_handler', { method: 'post', parameters: 'a=11', onComplete: null });
		window.location.href = "index.html";
	},

	doUpdateTurn : function () {
		new Ajax.Request(Game.controlUrl, { method: 'post', parameters: 'a=24', onComplete: Game.checkTurnConditions });
	},
	
	checkTurnConditions : function(r) {
		var turn = eval(r.responseText);

		if (turn[0].setup == "terminated") {
			alert("game has been terminated! \n reason: " + turn[0].reason);
			Game.returnToMain();
			return;
		}

		if (turn[0].setup == "true") {
			$('game_message').innerHTML = "opponent not done setting up!";
			return;
		}
		
		if (turn[0].mine == "true") {
			$('game_message').innerHTML = "<font color=\"#c4f369\">your turn!<\/font>";
		} else {
			$('game_message').innerHTML = "<font color=\"red\">enemy turn!<\/font>";
		}

		if (turn[0].update == "true") {
			// update the board.
			if ( $('p_' + turn[0].y + '_' + turn[0].x).className == Game.EMPTY ) 
				$('p_' + turn[0].y + '_' + turn[0].x).src = "images/battle/shot.gif";
			else {
				$('p_' + turn[0].y + '_' + turn[0].x).src = "images/battle/" + $('p_' + turn[0].y + '_' + turn[0].x).alt + "d.gif";
				
			}
			
			Effect.Pulsate($('p_' + turn[0].y + '_' + turn[0].x));
		}
		
		if ( (turn[0].over == "true") && (Game.gameOver == false) ) {
			clearInterval(turnUpdateId);
			Game.showMessage('l');
		}
	},

	// Game starting settings need to go into here...
	//		Just a message so far, anything else?
	doBeginGame : function (r) {
		if (r.responseText == 'success') {
			Game.showMessage('b');
		} else {
			alert('Game start error!');
		}
		
		turnUpdateId = setInterval(Game.doUpdateTurn, 2000);
	},
	
	doSetupCompletion : function() {
		if (Game.shipsPlaced == Ships.TOTAL) {
			Game.setupPhase = false;
			Game.gamePhase = true;

			Event.stopObserving($('setup_button'), 'click', Game.doSetupCompletion, false);
			$('other_area').innerHTML = "";
			new Ajax.Request(Game.controlUrl, { method: 'post', parameters: 'a=20&s=' + Game.shipPositions, onComplete: Game.doBeginGame });
		} else {
			Effect.Pulsate($('h_battleship'));
			Effect.Pulsate($('h_cruiser_1'));
			Effect.Pulsate($('h_cruiser_2'));
			Effect.Pulsate($('h_destroyer_1'));
			Effect.Pulsate($('h_destroyer_2'));
			Effect.Pulsate($('h_destroyer_3'));
			Effect.Pulsate($('h_submarine_1'));
			Effect.Pulsate($('h_submarine_2'));
			Effect.Pulsate($('h_submarine_3'));
			Effect.Pulsate($('h_submarine_4'));

			Effect.Pulsate($('v_battleship'));
			Effect.Pulsate($('v_cruiser_1'));
			Effect.Pulsate($('v_cruiser_2'));
			Effect.Pulsate($('v_destroyer_1'));
			Effect.Pulsate($('v_destroyer_2'));
			Effect.Pulsate($('v_destroyer_3'));
		}
	},

	doShoot : function(y, x) {
		Game.shootX = x;
		Game.shootY = y;
		new Ajax.Request(Game.controlUrl, { method: 'post', parameters: 'a=22&s=' + x + '_' + y, onComplete: Game.checkAttack });
	},

	checkAttack : function(r) {
		var turn = eval(r.responseText);

		if (turn[0].setup == "terminated") {
			alert("game has been terminated! \nreason: " + turn[0].reason);
			Game.returnToMain();
			return;
		}

		if (turn[0].setup == "true") {
			$('game_message').innerHTML = "opponent not done setting up!";
			return;
		}

		if ( turn[0].result == "forfeit" ) {
			clearInterval(turnUpdateId);
			Game.showMessage('f');
		} else if ( turn[0].result == "miss" ) {
			$('e_' + Game.shootY + '_' + Game.shootX).src = "images/battle/shot.gif";
			//soundManager.play('miss');
//			$('e_' + Game.shootY + '_' + Game.shootX).href = "javascript:void(0);";
		} else if ( turn[0].result == "invalid turn" ) {
			alert('please wait, enemy turn in progress');
		} else if ( turn[0].result == "hit" ) {
			$('e_' + Game.shootY + '_' + Game.shootX).src = "images/battle/hit.gif";
//			$('e_' + Game.shootY + '_' + Game.shootX).href = "javascript:void(0);";

			if (turn[0].ship != "") {
				var size = turn[0].shipS;
				Game.sunk_array.push( { "t":3,"s":size,"x":turn[0].shipX,"y":turn[0].shipY,"d":turn[0].shipD } );

				if (size == 1)
					$('e_' + turn[0].shipY + '_' + turn[0].shipX).src = "images/battle/drone_1d.gif";
				else {
					var dir = turn[0].shipD;
					var x = eval(turn[0].shipX);
					var y = eval(turn[0].shipY);
					if ( dir == 'h' ) {
						for (i = 0; i < size; i++ ) {
							$('e_' + y + '_' + x).src = "images/battle/" + Ships.getShipImageName(size) + "_" + dir + (size - i) + "d.gif";
							x++;
						}
					} else if ( dir == 'v' ) {
						for (i = 0; i < size; i++ ) {
							$('e_' + y + '_' + x).src = "images/battle/" + Ships.getShipImageName(size) + "_" + dir + (i + 1) + "d.gif";
							y++;
						}
					}
				}
			}
			//soundManager.play('enemyShipHit_1');
		}
		
		Game.drawRafts();

		if (turn[0].over == "true") {
			Game.gameOver = true;
			clearInterval(turnUpdateId);
			Game.showMessage('w');
		}
	},
	
	drawRafts : function() {
		for (i = 0; i < Game.sunk_array.length; i++) {
			var s = eval(Game.sunk_array[i]);
			if (s.t > 0) {
				Game.sunk_array[i] = { "t":(s.t - 1),"s":s.s,"x":s.x,"y":s.y,"d":s.d };
			} else if (s.t == 0) {
				var x = s.x;
				var y = s.y;
				var d = s.d;
				for (j = 0; j < s.s; j++) {
					$('e_' + y + '_' + x).src = "images/battle/raft" + Math.round((Math.random()*4)+1) + ".gif";

					if ( d == 'h' ) x++;
					else            y++;
				}

				Game.sunk_array[i] = { "t":-1,"s":s.s,"x":s.x,"y":s.y,"d":s.d };
			}
		}
	},

	showGrid : function() {
		var y, x;
		var u_out = "";
		var e_out = "";
		for (y = 0; y < Game.BOARD_HEIGHT; y++) {
			for (x = 0; x < Game.BOARD_WIDTH; x++) {
				u_out = u_out + '<a href="javascript:void(0);"><img border="0" name="p_' + y + '_' + x + '" id="p_' + y + '_' + x + '" alt="p_' + y + '_' + x + '" src="images/battle/empty.gif" width="32" height="32" class="' + Game.EMPTY + '"><\/a>';
				e_out = e_out + '<a href="javascript: Game.doShoot(' + y + ', ' + x + ');"><img border="0" name="e_' + y + '_' + x + '" id="e_' + y + '_' + x + '" alt="e_' + y + '_' + x + '" src="images/battle/empty.gif" width="32" height="32"><\/a>';
			}
		}

		$('your_area').innerHTML = u_out + "<br>";
		$('enemy_area').innerHTML = e_out + "<br>";
		
		Game.initDraggables();
	},

	initDraggables : function () {
		new Draggable($('h_battleship'), {revert:false});
		new Draggable($('h_cruiser_1'), {revert:false});
		new Draggable($('h_cruiser_2'), {revert:false});
		new Draggable($('h_destroyer_1'), {revert:false});
		new Draggable($('h_destroyer_2'), {revert:false});
		new Draggable($('h_destroyer_3'), {revert:false});
		new Draggable($('h_submarine_1'), {revert:false});
		new Draggable($('h_submarine_2'), {revert:false});
		new Draggable($('h_submarine_3'), {revert:false});
		new Draggable($('h_submarine_4'), {revert:false});
		
		new Draggable($('v_battleship'), {revert:false});
		new Draggable($('v_cruiser_1'), {revert:false});
		new Draggable($('v_cruiser_2'), {revert:false});
		new Draggable($('v_destroyer_1'), {revert:false});
		new Draggable($('v_destroyer_2'), {revert:false});
		new Draggable($('v_destroyer_3'), {revert:false});

		for (y = 0; y < Game.BOARD_HEIGHT; y++) {
			for (x = 0; x < Game.BOARD_WIDTH; x++) {
				Droppables.add('p_' + y + '_' + x, { accept: 'ship', onDrop: Game.shipDrop });
			}
		}
	},

	shipDrop : function(ship, cell) { 
		var coords = new String(cell.id);
		var shipName = new String(ship.id);
		var y = coords.charAt(2);
		var x = coords.charAt(4);
		
		if ( !Game.setupPhase ) return;

		if ( x >= Game.BOARD_WIDTH || y >= Game.BOARD_HEIGHT ) { 
			Effect.Pulsate(ship);
			return; 
		}

		if (Game.shipsPlaced >= Ships.TOTAL) return;

		if((ship.childNodes.length != Ships.BATTLESHIP) &&
		   (ship.childNodes.length != Ships.CRUISER) &&
		   (ship.childNodes.length != Ships.DESTROYER) &&
		   (ship.childNodes.length != Ships.SUBMARINE) ) return;

		if (ship.childNodes.length != 1) { 
			if ( shipName.charAt(0) == 'h' ) { if ( eval(x) + ship.childNodes.length > Game.BOARD_WIDTH )  { Effect.Pulsate(ship); return; } }
			else                             { if ( eval(y) + ship.childNodes.length > Game.BOARD_HEIGHT ) { Effect.Pulsate(ship); return; } }
		}

		if ( !Game.areaAroundClear(coords.charAt(4), coords.charAt(2), shipName.charAt(0), ship.childNodes.length) ) { 
			Effect.Pulsate(ship);
			return;
		}

		if (ship.childNodes.length == 1) { //sub
			$('p_' + y + '_' + x).src = "images/battle/drone_1.gif";
			$('p_' + y + '_' + x).className = Game.NOT_EMPTY;
			$('p_' + y + '_' + x).alt = "drone_1";

			Effect.Puff(ship);
			Game.shipsPlaced++;
			Game.shipPositions = Game.shipPositions + x + "_" + y + "_h_1~";
		} else {
			for (i = 0; i < ship.childNodes.length; i++ ) {
				$('p_' + y + '_' + x).className = Game.NOT_EMPTY;
				
				if (shipName.charAt(0) == 'h') {
					$('p_' + y + '_' + x).src = "images/battle/" + Ships.getShipImageName(ship.childNodes.length) + "_" + shipName.charAt(0) + (ship.childNodes.length - i) + ".gif";
					$('p_' + y + '_' + x).alt = Ships.getShipImageName(ship.childNodes.length) + "_" + shipName.charAt(0) + (ship.childNodes.length - i);
				} else {
					$('p_' + y + '_' + x).src = "images/battle/" + Ships.getShipImageName(ship.childNodes.length) + "_" + shipName.charAt(0) + (i + 1) + ".gif";
					$('p_' + y + '_' + x).alt = Ships.getShipImageName(ship.childNodes.length) + "_" + shipName.charAt(0) + (i + 1);
				}

				if ( shipName.charAt(0) == 'h' ) x++;
				else                             y++;
			}

			Effect.Puff($('v' + shipName.substring(1, shipName.length)));
			Effect.Puff($('h' + shipName.substring(1, shipName.length)));
			Game.shipsPlaced++;
			Game.shipPositions = Game.shipPositions + coords.charAt(4) + "_" + coords.charAt(2) + "_" + shipName.charAt(0) + "_" + ship.childNodes.length + "~";
		}
	},

	areaAroundClear : function (x, y, direction, size) {
		var localX = eval(x);
		var localY = eval(y);

		for ( i = 0; i < size; i++ ) {
			var cell = $('p_' + localY + '_' + localX);

			if ( cell.className != Game.EMPTY ) return false;

			if ( (localY - 1) != -1 ) {
				cell = $('p_' + (localY - 1) + '_' + localX);
				if (cell.className != Game.EMPTY) return false;
			}

			if ( (localY + 1) != Game.BOARD_HEIGHT ) {
				cell = $('p_' + (localY + 1) + '_' + localX);
				if (cell.className != Game.EMPTY) return false;
			}

			if ( (localX - 1) != -1) {
				cell = $('p_' + localY + '_' + (localX - 1));
				if (cell.className != Game.EMPTY) return false;
			}

			if ( (localX + 1) != Game.BOARD_WIDTH) {
				cell = $('p_' + localY + '_' + (localX + 1));
				if (cell.className != Game.EMPTY) return false;
			}

			if ( ((localY - 1) != -1) && ((localX - 1) != -1) ) {
				cell = $('p_' + (localY - 1) + '_' + (localX - 1));
				if (cell.className != Game.EMPTY) return false;
			}

			if ( ((localY + 1) != Game.BOARD_HEIGHT) && ((localX + 1) != Game.BOARD_WIDTH) ) {
				cell = $('p_' + (localY + 1) + '_' + (localX + 1));
				if (cell.className != Game.EMPTY) return false;
			}

			if ( ((localY - 1) != -1) && ((localX + 1) != Game.BOARD_WIDTH) ) {
				cell = $('p_' + (localY - 1) + '_' + (localX + 1));
				if (cell.className != Game.EMPTY) return false;
			}
			
			if ( ((localY + 1) != Game.BOARD_HEIGHT) && ((localX - 1) != -1) ) {
				cell = $('p_' + (localY + 1) + '_' + (localX - 1));
				if (cell.className != Game.EMPTY) return false;
			}

			if ( direction == 'h' ) localX++;
			else                    localY++;
		}

		return true;
	},

	doClose : function () {
		new Ajax.Request(Game.controlUrl, { method: 'post', parameters: 'a=14', onComplete: null });
		new Ajax.Request('main_handler', { method: 'post', parameters: 'a=14', onComplete: null });
	},

	debug : function(r) {
		alert(r);
	},

	doPlayerList : function () {
		//new Ajax.Request("main_handler", { method: 'post', parameters: 'a=12', onComplete: Game.drawPlayers });
	},
	
	drawPlayers : function(r) {
		var players = eval(r.responseText);
		for (i = 0; i < players.length; i++) {
			var player = players[i];

			var element;
			if (player.registered == "false") {
				element = Builder.node('div',{ id: 'player_' + player.num, className: "player_node_" + player.registered, style: "display: none;" },[
						Builder.node('span', '#' + player.num), ' [ ', 
						Builder.node('span', { id: player.name, className: "player" }, player.name), ' ] ',
						Builder.node('span', { id: 'msg', onclick: "Chat.doMessageOpenWindow('" + player.uid + "', '" + player.name + "');" }, [
						Builder.node('img', { src: 'images/battle/msg.gif', alt: 'send message' } ) ])
				]);
			} else {
				element = Builder.node('div',{ id: 'player_' + player.num, className: "player_node_" + player.registered, style: "display: none;" },[
						Builder.node('span', '#' + player.num), ' [ ', 
						Builder.node('span', { id: player.name, className: "player" }, [
							Builder.node('a', { href: 'javascript:void(0);', onclick: "Info.doPlayerInfo('" + player.uid + "')" }, [ player.name ] ) 
						]), ' ] ',
						Builder.node('span', { id: 'msg', onclick: "Chat.doMessageOpenWindow('" + player.uid + "', '" + player.name + "');" }, [
						Builder.node('img', { src: 'images/battle/msg.gif', alt: 'send message' } ) ])
				]);
			}
			
			if (!$('player_' + player.num)) {
				$('player_list_area').appendChild(element);
				Effect.Appear(element);
			} else {
				var n = $('player_' + player.num).childNodes.item(2);

				if (n.id != player.name) {
					Effect.Fade($('player_' + player.num));
					$('player_list_area').removeChild($('player_' + player.num));
					$('player_list_area').appendChild(element);
					Effect.Appear(element);
				}
			}
		}
		
		var o = (players.length + 1);
		do {
			if ($('player_' + o)) {
				Effect.Fade($('player_' + o));
				$('player_list_area').removeChild($('player_' + o));
				o++;
			} else {
				break;
			}			
		} while (true);
	},

	gamePhase : false,
	setupPhase : true,
	gameOver : false,
	shipsPlaced : 0,
	shipPositions : "",
	shootX : "",
	shootY : "",
	sunk_array : [],
	EMPTY : "empty",
	NOT_EMPTY : "not_empty",
	BOARD_HEIGHT : 10,
	BOARD_WIDTH: 10
}

Ships = {
	BATTLESHIP : 4,
	BATTLESHIP_TEXT : "Battleship",
	BATTLESHIP_IMAGE : "frigate",
	CRUISER : 3,
	CRUISER_TEXT : "Cruiser",
	CRUISER_IMAGE : "hunter",
	DESTROYER : 2,
	DESTROYER_TEXT : "Destroyer",
	DESTROYER_IMAGE : "sub",
	SUBMARINE : 1,
	SUBMARINE_TEXT : "Submarine",
	SUBMARINE_IMAGE : "drone",
	TOTAL : 10,
	
	getShipImageName : function(size) {
		if (size == Ships.BATTLESHIP) return Ships.BATTLESHIP_IMAGE;
		if (size == Ships.CRUISER) return Ships.CRUISER_IMAGE;
		if (size == Ships.DESTROYER) return Ships.DESTROYER_IMAGE;
		if (size == Ships.SUBMARINE) return Ships.SUBMARINE_IMAGE;		
	},
	
	getShipSizeByName : function(name) {
		if (name == Ships.BATTLESHIP_TEXT) return Ships.BATTLESHIP;
		if (name == Ships.CRUISER_TEXT) return Ships.CRUISER;
		if (name == Ships.DESTROYER_TEXT) return Ships.DESTROYER;
		if (name == Ships.SUBMARINE_TEXT) return Ships.SUBMARINE;		
	}
}

Event.observe(window, 'load', Game.doStart, false);

// ]]>
	</script>
</head>

<body>

<!-- End: AdBrite intretestial -->
<table id="main_table" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="5" class="google_ad_area">
		&nbsp;
		</td>
		<td colspan="6">
			<img src="images/battle/sms3_02.jpg" width="933" height="53" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/battle/sms3_03.jpg" width="30" height="325" alt=""></td>
		<td class="player_area">
			<div id="your_area" class="game_field"></div>
		</td>
		<td class="staging_area">
			<span id="game_message" class="game_message">drag ships to your fleet area</span><br><br>
			<div id="other_area" class="other_field">
				<div id="h_battleship" class="ship horizontal"><img border="0" src="images/battle/frigate_h4o.gif" alt="frigate_h4"><img border="0" src="images/battle/frigate_h3o.gif" alt="frigate_h3"><img border="0" src="images/battle/frigate_h2o.gif" alt="frigate_h2"><img border="0" src="images/battle/frigate_h1o.gif" alt="frigate_h1"></div>
				<div><span id="h_cruiser_1" class="ship horizontal"><img border="0" src="images/battle/hunter_h3o.gif" alt="hunter_h3"><img border="0" src="images/battle/hunter_h2o.gif" alt="hunter_h2"><img border="0" src="images/battle/hunter_h1o.gif" alt="hunter_h1"></span><span id="h_cruiser_2" class="ship horizontal"><img border="0" src="images/battle/hunter_h3o.gif" alt="hunter_h3"><img border="0" src="images/battle/hunter_h2o.gif" alt="hunter_h2"><img border="0" src="images/battle/hunter_h1o.gif" alt="hunter_h1"></span></div>
				<div><span id="h_destroyer_1" class="ship horizontal"><img border="0" src="images/battle/sub_h2o.gif" alt="sub_h2"><img border="0" src="images/battle/sub_h1o.gif" alt="sub_h1"></span><span id="h_destroyer_2" class="ship horizontal"><img border="0" src="images/battle/sub_h2o.gif" alt="sub_h2"><img border="0" src="images/battle/sub_h1o.gif" alt="sub_h1"></span><span id="h_destroyer_3" class="ship horizontal"><img border="0" src="images/battle/sub_h2o.gif" alt="sub_h2"><img border="0" src="images/battle/sub_h1o.gif" alt="sub_h1"></span></div>
				<table style="width:90%;margin:15px;">
				  <tr> 
						<td width="16" valign="top"><span id="v_battleship" class="ship vertical"><img border="0" src="images/battle/frigate_v1o.gif" alt="frigate_v1"><img border="0" src="images/battle/frigate_v2o.gif" alt="frigate_v2"><img border="0" src="images/battle/frigate_v3o.gif" alt="frigate_v3"><img border="0" src="images/battle/frigate_v4o.gif" alt="frigate_v4"></span></td>
						<td width="16" valign="top"><div id="v_cruiser_1" class="ship vertical"><img border="0" src="images/battle/hunter_v1o.gif" alt="hunter_v1"><img border="0" src="images/battle/hunter_v2o.gif" alt="hunter_v2"><img border="0" src="images/battle/hunter_v3o.gif" alt="hunter_v3"></div><div id="h_submarine_1" class="ship horizontal"><img border="0" src="images/battle/drone_1o.gif" alt="drone_1"></div></td>
						<td width="16" valign="top"><div id="v_cruiser_2" class="ship vertical"><img border="0" src="images/battle/hunter_v1o.gif" alt="hunter_v1"><img border="0" src="images/battle/hunter_v2o.gif" alt="hunter_v2"><img border="0" src="images/battle/hunter_v3o.gif" alt="hunter_v3"></div><div id="h_submarine_2" class="ship horizontal"><img border="0" src="images/battle/drone_1o.gif" alt="drone_1"></div></td>
						<td width="16" valign="top"><div id="v_destroyer_1" class="ship vertical"><img border="0" src="images/battle/sub_v1o.gif" alt="sub_v1"><img border="0" src="images/battle/sub_v2o.gif" alt="sub_v2"></div><div id="v_destroyer_2" class="ship vertical"><img border="0" src="images/battle/sub_v1o.gif" alt="sub_v1"><img border="0" src="images/battle/sub_v2o.gif" alt="sub_v2"></div></td>
						<td width="16" valign="top"><div id="v_destroyer_3" class="ship vertical"><img border="0" src="images/battle/sub_v1o.gif" alt="sub_v1"><img border="0" src="images/battle/sub_v2o.gif" alt="sub_v2"></div><div id="h_submarine_3" class="ship horizontal"><img border="0" src="images/battle/drone_1o.gif" alt="drone_1"></div><div id="h_submarine_4" class="ship horizontal"><img border="0" src="images/battle/drone_1o.gif" alt="drone_1"></div></td>
				  </tr>
				</table>
				<input type="button" id="setup_button" name="setup_button" value="finish setup" class="button">
			</div>
		</td>
		<td colspan="2" class="enemy_area">
			<div id="enemy_area"  class="game_field"></div>
		</td>
		<td>
			<img src="images/battle/sms3_07.jpg" width="24" height="325" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/battle/sms3_08.jpg" width="933" height="64" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" class="chat_table_area">
			&nbsp;
		</td>
		<td colspan="2" class="side_player_area">
			<div id="player_list_area" class="lists2"></div>
		</td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/battle/sms3_11.jpg" width="933" height="54" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/battle/spacer.gif" width="183" height="1" alt=""></td>
		<td>
			<img src="images/battle/spacer.gif" width="30" height="1" alt=""></td>
		<td>
			<img src="images/battle/spacer.gif" width="322" height="1" alt=""></td>
		<td>
			<img src="images/battle/spacer.gif" width="234" height="1" alt=""></td>
		<td>
			<img src="images/battle/spacer.gif" width="82" height="1" alt=""></td>
		<td>
			<img src="images/battle/spacer.gif" width="241" height="1" alt=""></td>
		<td>
			<img src="images/battle/spacer.gif" width="24" height="1" alt=""></td>
	</tr>
</table>
</body>
</html>